<template>
  <div id="">
    <ul class="memberSetBox">
      <li>
        <p>头像</p>
        <div class="rightForm" @click="chooseHeadimg">
          <span>
            <img :src="userInfo.icon" class="userImg" alt="" v-if="userInfo.icon">
            <img src="@/assets/images/userImg@2x.png" class="userImg" alt="" v-else>
          </span>
          <img src="@/assets/images/right-icon@2x.png" class="rightIcon" alt="">
        </div>
      </li>
      <li>
        <p>昵称</p>
        <router-link class="rightForm" :to="{ name: 'changeName', params: {}}">
        <!-- <div class="rightForm" @click="cName"> -->
          <span>{{userInfo.userName}}</span>
          <img src="@/assets/images/right-icon@2x.png" class="rightIcon" alt="">
        <!-- </div> -->
        </router-link>
      </li>
      <li>
        <p>性别</p>
        <div class="rightForm" @click="chooseSex">
          <span v-if="userInfo.sex==0">
            女
          </span>
          <span v-else>男</span>
          <img src="@/assets/images/right-icon@2x.png" class="rightIcon" alt="">
        </div>
      </li>
      <li>
        <p>生日</p>
        <div class="rightForm" @click="birthDayCK">
          <span>
            <input type="text" name="" readonly v-model="birthDay" placeholder="请选择生日日期">
          </span>
          <img src="@/assets/images/right-icon@2x.png" class="rightIcon" alt="">
        </div>
      </li>
      <li>
        <p>手机号</p>
        <div class="rightForm" @click="cMobile">
          <span>{{userInfo.mobile}}</span>
          <img src="@/assets/images/right-icon@2x.png" class="rightIcon" alt="">
        </div>
      </li>
      <li>
        <p>实名认证</p>
        <router-link  class="rightForm"
        :to="{ path: '/certification', query: {} }">
          <span v-if="userInfo.isRealAuth==1">已认证</span>
          <span v-else>未认证</span>
          <img src="@/assets/images/right-icon@2x.png" class="rightIcon" alt="">
        </router-link>
      </li>
    </ul>

    <!-- <div class="fixedBottom">
      <button type="button" name="button" class="blockBtn" @click="submitUser">确定</button>
    </div> -->
    <!-- 底部弹出框 -->
    <mt-popup
      v-model="isMintPicker"
      position="bottom" style="width:100%;">
      <mint-picker
      :slots="slots"
      :valueKey="valueKey"
      @mintPickerBtn="mintPickerBtn"
      ></mint-picker>
    </mt-popup>
    <!-- 选择头像方式 -->
    <mt-popup
      v-model="isHeaderimg"
      position="bottom" style="width:100%;">
      <head-img class="headImg" @pickerHeaderCK="pickerHeaderCK" @userImg="userImg"></head-img>
    </mt-popup>

    <!-- 选择生日日期 -->
    <mt-datetime-picker
      ref="picker"
      v-model="pickerBirthday"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      :startDate="startDate"
      @confirm="birthdayConfirm">
    </mt-datetime-picker>

    <comfirm-login style="top:0;"
    :comfirmTitle="comfirmTitle" v-if="isWrong"
    @comfirmEvent="comfirmEvent"></comfirm-login>
  </div>
</template>
<script src="./memberSet.js"></script>
<style lang="scss" scoped src="./memberSet.scss"></style>
